<!-- 140 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="getList">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      ref="queryForm"
      group="viewMaterialWip"
      :model="queryForm"
      >
      <a-row
        :gutter="[16, 0]"
      >
        <a-col :span="6">
          <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId" :rules="{ required: true, message: $t('valid_required'), trigger: 'change'}">
            <a-select v-model:value="queryForm.shopId" class="select-width">
              <a-select-option v-for="item in shopIdArr"
              :key="item.shopId" :value="item.shopId">
              {{item.shopId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_materialType')" name="materialType"  prop="materialType" :rules="{ required: true, message: $t('valid_required'), trigger: 'change'}">
            <a-select v-model:value="queryForm.materialType" class="select-width">
              <a-select-option v-for="item in materialTypeArr"
              :key="item.enumValue" :value="item.enumValue">
              {{item.enumValue}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_state')" name="state">
            <a-select v-model:value="queryForm.state" class="select-width">
              <a-select-option v-for="item in stateArr"
              :key="item.enumValue" :value="item.enumValue">
              {{item.enumValue}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_location')" name="location">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.location"
              class="width-input"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_materialId')" name="materialId">
            <a-input
              :placeholder="$t('common_pleaseEnter1')"
              allow-clear
              v-model:value.trim="formState.materialId"
              class="width-input"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-descriptions
      bordered
      :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
    >
      <a-descriptions-item :label="$t('T9_totalQty')">{{ table.totalQty }}</a-descriptions-item>
    </a-descriptions>
    <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="15" class="global-oper-row-title">{{ $t('T9_cstList') }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button>{{ $t('t9_toExcel') }}</a-button>
      </a-col>
    </a-row>
    <t-table
      :data="table.cstListByMachineDTOList"
    >
      <t-column field="materialId" :title="$t('T9_materialId')" />
      <t-column field="type" :title="$t('T9_type')" />
      <t-column field="eventUser" :title="$t('T9_partNo')" />
      <t-column field="createQty" :title="$t('T9_createQty')" />
      <t-column field="currentQty" :title="$t('T9_currentQty')" />
      <t-column field="location" :title="$t('T9_location')" />
      <t-column field="unitId" :title="$t('T9_unitId')" />
      <t-column field="subUnitId" :title="$t('T9_subUnitId')" />
      <t-column field="headId" :title="$t('T9_headId')" />
      <t-column field="state" :title="$t('T9_state')" />
      <t-column field="prTestState" :title="$t('T9_prTestState')" v-if="queryForm.shopId !== 'CELL'"/>
      <t-column field="piTestState" :title="$t('T9_piTestState')" v-else/>
      <t-column field="iceCount" :title="$t('T9_iceCount')" />
      <t-column field="warmCount" :title="$t('T9_warmCount')" />
      <t-column field="warmQtime" :title="$t('T9_warmQtime')" />
      <t-column field="materialRemainCount" :title="$t('T9_materialRemainCount')" />
      <t-column field="oldOperation" :title="$t('T9_measuredValue')" />
      <t-column field="measuredValue" :title="$t('T9_holdState')" />
      <t-column field="holdState" :title="$t('T9_sapId')" />
      <t-column field="groupId" :title="$t('T9_groupId')" />
      <t-column field="stayHour" :title="$t('T9_stayHour')" />
      <t-column field="validDate" :title="$t('T9_validDate')" />
      <t-column field="createTime" :title="$t('T9_createTime')" />
      <t-column field="createUser" :title="$t('T9_createUser')" />
      <t-column field="lastEventUser" :title="$t('T9_lastEventUser')" />
      <t-column field="lastEventTime" :title="$t('T9_lastEventTime')" />
      <t-column field="lastEventName" :title="$t('T9_lastEventName')" />
      <t-column field="lastEventUser" :title="$t('T9_lastComment')" />
    </t-table>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import {
    getShopId,
    getMaterialType,
    getState,
    getList
  } from '@/api/common'
  import { getCurrentDate } from '@/utils/utils'

  export default defineComponent({
    name: 'viewMaterialWip',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: []
        },
        shopIdArr: [],
        materialTypeArr: [],
        stateArr: [],
        queryForm: {
          shopId: 'CELL',
          state: '',
          materialType: '',
          materialId: '',
          location: ''
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getShopId()
      this.getProductType()
      this.getOwnerType()
      this.getList()
      this.queryForm.Date = [moment(getCurrentDate(), 'YYYY-MM-DD HH:mm:ss'), moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm:ss')]
    },
    methods: {
      onChange(value, dates) {
        this.queryForm.Date = value
        console.log('Selected Time: ', value)
        console.log('Formatted Selected Time: ', dates)
      },
      getList() {
        const obj = {
          dtoName: 'MaterialTypeDTO',
          queryId: 'GetMaterialList',
          shopId: this.queryForm.shopId,
          state: this.queryForm.state,
          materialType: this.queryForm.materialType,
          materialId: this.queryForm.materialId,
          location: this.queryForm.location,
          version: '80011',
          menuName: 'viewMaterialWip',
          usage: 'queryMaterialList'
        }
        getList(obj).then(res => {
          this.table = res
        })
      },
      handleSearch() {},
      getShopId() {
        const params = {
          userGroup: 'CellPIOper'
        }
        getShopId(params).then(res => {
          this.shopIdArr = res
        })
      },
      getMaterialType() {
        const params = {
          shopId: this.queryForm.shopId
        }
        getMaterialType(params).then(res => {
          this.bayIdArr = res
        })
      },
      getState() {
        const params = {
          bayId: this.queryForm.bayId,
          shopId: this.queryForm.shopId
        }
        getState(params).then(res => {
          this.eqpIdArr = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
</style>
